<template>
  <div>
    <div id="container" style="height: calc(100vh - 110px);">
    
  </div>
  <div id="miniContainer">
      </div>
  </div>
 
</template>

<script>
import G6 from "@antv/g6";
import data from "./fundData.json";
export default {
  name: "G6DoemoFund",

  data() {
    return {};
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {
      const minimap = new G6.Minimap({
        container:'miniContainer',
        size: [100, 100],
        className: "minimap",
        type: "delegate",
      });
      G6.registerNode(
        "root",
        {
          drawShape: function drawShape(cfg, group) {
            const rect = group.addShape("rect", {
              attrs: {
                fill: "#1890ff",
                stroke: "#a0c9f4",
                x: 0,
                y: 0,
                width: 1,
                height: 1,
                radius: 5,
                lineWidth:5
              },
              draggable: true,
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: "rect-shape",
            });
            const v = `${cfg.nodeAttribute.name} ${cfg.nodeAttribute.account} ${cfg.nodeAttribute.organization}`
            const content = v.replace(/( )/g, "$1\n");
            const text = group.addShape("text", {
              attrs: {
                text: content,
                x: 0,
                y: 0,
                textAlign: "left",
                textBaseline: "middle",
                fill: "#fff",
                fontWeight:800
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: "text-shape",
            });
            const bbox = text.getBBox();
            const hasChildren = cfg.children && cfg.children.length > 0;
            rect.attr({
              x: -bbox.width / 2 - 4,
              y: -bbox.height / 2 - 6,
              width: bbox.width + (hasChildren ? 26 : 12),
              height: bbox.height + 12,
            });
            text.attr({
              x: -bbox.width / 2,
              y: 0,
            });
            if (hasChildren) {
              group.addShape("marker", {
                attrs: {
                  x: bbox.width / 2 + 12,
                  y: 0,
                  r: 6,
                  symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
                  stroke: "#666",
                  lineWidth: 2,
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: "collapse-icon",
              });
            }
            return rect;
          },
          update: (cfg, item) => {
            const group = item.getContainer();
            const icon = group.find((e) => e.get("name") === "collapse-icon");
            icon.attr(
              "symbol",
              cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse
            );
          },
        },
        "single-node"
      );
      G6.registerNode(
        "tree-node",
        {
          drawShape: function drawShape(cfg, group) {
            const rect = group.addShape("rect", {
              attrs: {
                fill: "#fff",
                stroke: "#666",
                x: 0,
                y: 0,
                width: 1,
                height: 1,
                radius: 5
              },
              draggable: true,
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: "rect-shape",
            });
            const v = `${cfg.nodeAttribute.name} ${cfg.nodeAttribute.account} ${cfg.nodeAttribute.organization}`
            const content = v.replace(/( )/g, "$1\n");
            const text = group.addShape("text", {
              attrs: {
                text: content,
                x: 0,
                y: 0,
                textAlign: "left",
                textBaseline: "middle",
                fill: "#666",
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: "text-shape",
            });
            const bbox = text.getBBox();
            const hasChildren = cfg.children && cfg.children.length > 0;
            rect.attr({
              x: -bbox.width / 2 - 4,
              y: -bbox.height / 2 - 6,
              width: bbox.width + (hasChildren ? 26 : 12),
              height: bbox.height + 12,
            });
            text.attr({
              x: -bbox.width / 2,
              y: 0,
            });
            if (hasChildren) {
              group.addShape("marker", {
                attrs: {
                  x: bbox.width / 2 + 12,
                  y: 0,
                  r: 6,
                  symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
                  stroke: "#666",
                  lineWidth: 2,
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: "collapse-icon",
              });
            }
            return rect;
          },
          update: (cfg, item) => {
            const group = item.getContainer();
            const icon = group.find((e) => e.get("name") === "collapse-icon");
            icon.attr(
              "symbol",
              cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse
            );
          },
        },
        "single-node"
      );
      G6.registerNode(
        "test",
        {
          drawShape: function drawShape(cfg, group) {
            const rect = group.addShape("rect", {
              attrs: {
                fill: "#fff",
                stroke: "#666",
                x: 0,
                y: 0,
                width: 1,
                height: 1,
                radius: 5,
              },
              draggable: true,
              name: "rect-shape",
            });
            const v = `${cfg.nodeAttribute.name} ${cfg.nodeAttribute.account} ${cfg.nodeAttribute.organization}`
            const content = v.replace(/( )/g, "$1\n");
             group.addShape("text", {
              attrs: {
                text: content,
                x: 0,
                y: 0,
                textAlign: "center",
                textBaseline: "middle",
                fill: "#666",
              },
            });
            return rect;
          },
          update: (cfg, item) => {
            const group = item.getContainer();
            const icon = group.find((e) => e.get("name") === "collapse-icon");
            icon.attr(
              "symbol",
              cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse
            );
          },
        },
        "single-node"
      );

      const container = document.getElementById("container");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      const graph = new G6.TreeGraph({
        container: "container",
        width,
        height,
        fitView:true,
        modes: {
          default: [
            {
              type: "collapse-expand",
              onChange: function onChange(item, collapsed) {
                const data = item.get("model");
                graph.updateItem(item, {
                  collapsed,
                });
                data.collapsed = collapsed;
                return true;
              },
            },
            "drag-canvas",
            "zoom-canvas",
          ],
        },
        defaultNode: {
          type: "tree-node",
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        defaultEdge: {
          type: "cubic-horizontal",
          style: {
            stroke: "#A3B1BF",
          },
        },
        layout: {
          type: "compactBox",
          direction: "LR",
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 56;
          },
          getWidth: function getWidth() {
            return 56;
          },
          getVGap: function getVGap() {
            return 20;
          },
          getHGap: function getHGap() {
            return 80;
          },
        },
        plugins: [minimap], // 将 minimap 实例配置到图上
      });
      G6.Util.traverseTree(data, function (item) {
            console.log('深度遍历树',item);
            if(item.nodeType=='0-0'){
              return item.type = 'root'
            }
            // if(item.id=="1698834374418219009"){
            //   return item.type = 'test'
            // }
          });
          graph.data(data);
          graph.render();
          graph.fitView();
    //   fetch(
    //     "https://gw.alipayobjects.com/os/antvdemo/assets/data/modeling-methods.json"
    //   )
    //     .then((res) => res.json())
    //     .then((data) => {
    //       G6.Util.traverseTree(data, function (item) {
    //         item.id = item.name;
    //       });
    //       graph.data(data);
    //       graph.render();
    //       graph.fitView();
    //     });

      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
  },
};
</script>

<style scoped>
#miniContainer{
  position: fixed;
  left: 0;
  bottom: 0;
  border-radius: 4px;
  border: 1px solid rgb(114, 114, 114);
}
</style>